<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

</head>

<body>
    <div id="app" class="demo">
        <p>
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/one" >Go to one</router-link>
        <hr>
        <router-link to="/two">Go to two</router-link>
        <hr>
        <!-- /three?plan=private -->
        <!-- replace 会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录 -->
        <router-link :to="{ path: 'three', query: { plan: 'private' }}" replace >Go to three</router-link>
        </p>
        <hr>
        <!-- <router-link> 中的 append 属性已被删除。你可以手动将值设置到现有的 path 中： -->
        <!-- 设置 append 属性后 我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b -->
        <router-link :to="append('three', 'fore')">地址叠加</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <template id="one">
        one----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: blue;">哈哈哈哈哈哈哈哈哈</div>
    </template>
    <template id="two">
        two----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: red;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
    <template id="three">
        two----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: palevioletred;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
</body>
<script>

    const oneConfig = {
        template: '#one',
        data() {
            return {
                name: "one",
                age: 11
            }
        }
    };
    const twoConfig = {
        template: '#two',
        data() {
            return {
                name: "two",
                age: 12
            }
        }
    };

    const threeConfig = {
        template: '#three',
        data() {
            return {
                name: "three",
                age: 13
            }
        }
    };
    const HelloVueApp = {
        data() {
            return {

            }
        },
        components: {
            one: oneConfig,
            two: twoConfig,
            three: threeConfig
        },
        methods:{
            append(a,b){
                return a+'/'+b;
            }
        }
    };

    //定义路由
    const routes = [
        { path: '/one', component: oneConfig },
        { path: '/two', component: twoConfig },
        { path: '/three', component: threeConfig },
        { path: '/three/fore', component: threeConfig },
    ];
    //定义vueRouter对象
    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes
    });
    const app = Vue.createApp(HelloVueApp);
    //使用路由
    app.use(router);
    app.mount('#app');
</script>

</html>